<!-- Records.vue -->
<template>
  <div class="records">
    <!-- 顶部筛选条件 -->
    <van-tabs v-model:active="activeTab" @change="onTabChange" sticky swipeable>
      <van-tab v-for="tab in tabs" :key="tab.value" :title="tab.label" :name="tab.value">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list v-model:loading="loading" :finished="finished" :error="error" error-text="请求失败，点击重试" @load="onLoad">
            <!-- 记录列表 -->
            <div v-if="records.length > 0" class="record-list">
              <van-cell-group v-for="record in records" :key="record.id" class="record-item"
                @click="goToDetail(record.recordId)">
                <van-cell>
                  <!-- 头部信息 -->
                  <template #title>
                    <div class="record-header">
                      <span class="point-name">{{ record.checkPlace || '未知地点' }}</span>
                      <van-tag :type="getStatusType(record.eventType)">
                        {{ getStatusText(record.eventType) }}
                      </van-tag>
                    </div>
                  </template>

                  <!-- 标签信息 -->
                  <template #label>
                    <div class="record-info">
                      <div class="info-row check-result">
                        <span>报修内容：{{ record.checkContent || '无' }}
                        </span>
                        <!-- <van-button class="clickBtn" v-if="record.eventType == 0" @click.stop="goToUpdate(record)" type="primary"
                          size="mini">点击接单</van-button> -->
                      </div>
                      <div class="info-row">
                        <span>报修人: {{ record.checkUserName || '位置人员' }}</span>
                        <span>时间: {{ formatTime(record.recordTime) }}</span>
                      </div>
                    </div>
                  </template>
                </van-cell>
              </van-cell-group>
            </div>

            <!-- 空状态 -->
            <van-empty v-else-if="!loading" description="暂无记录" />
          </van-list>
        </van-pull-refresh>
      </van-tab>
    </van-tabs>

    <van-dialog @confirm="changeType" v-model:show="dialogShow" title="接单提示" show-cancel-button>
      <div style="text-align: center;">是否确认接单？</div>
    </van-dialog>
  </div>
</template>

<script setup>
  import { ref, onMounted, inject } from 'vue'
  import { useRouter } from 'vue-router'
  import { Tag as VanTag, Button as VanButton, Empty as VanEmpty } from "vant"
  import { getAbnormalList, updateData } from "@/api/common"

  const router = useRouter()
  const pageSize = 10

  // 状态定义
  const tabs = [
    { label: '全部', value: 'ALL' },
    { label: '未接单', value: '0' },
    { label: '已接单', value: '1' },
    { label: '处理中', value: '2' },
    { label: '等待中', value: '3' },
    { label: '已办结', value: '4' }
  ]

  // 列表相关状态
  const toast = inject("toast")
  const activeTab = ref('ALL')
  const records = ref([])
  const loading = ref(true)
  const finished = ref(false)
  const refreshing = ref(false)
  const error = ref(false)
  const currentPage = ref(1)
  const dialogShow = ref(false)
  const record = ref({})
  const userInfo = ref(JSON.parse(localStorage.getItem("SAVE_USER_INFO")))

  function getList() {
    let obj = {
      pageSize: pageSize,
      page: currentPage.value,
      eventType: activeTab.value == 'ALL' ? null : activeTab.value,
      userId: userInfo.value.userId
    }
    getAbnormalList(obj).then(res => {
      let newRecords = res.records || []
      if (refreshing.value) {
        records.value = res.records
      } else {
        records.value = [...records.value, ...newRecords]
      }
      loading.value = false
      error.value = false
      finished.value = newRecords.length < pageSize
      currentPage.value++
    })
  }

  // 列表加载更多
  const onLoad = () => {
    if (!finished.value) {
      loading.value = true
      getList()
    }
  }

  // 下拉刷新
  const onRefresh = () => {
    finished.value = false
    error.value = false
    currentPage.value = 1
    getList()
  }

  // 标签页切换
  const onTabChange = () => {
    records.value = []
    currentPage.value = 1
    finished.value = false
    loading.value = true
    getList()
  }

  // 跳转详情页
  const goToDetail = async (id) => {
    try {
      await router.push(`/repairDetail?id=${id}&type=detail`)
    } catch (error) {
    }
  }

  function goToUpdate(val) {
    dialogShow.value = true
    record.value = val
  }

  function changeType() {
    record.value.eventType = 1
    record.value.userId = userInfo.value.userId
    record.value.userName = userInfo.value.realName
    updateData(record.value).then(res => {
      if (res.code == 200) {
        toast.msg(res.message)
      }
      dialogShow.value = false
    }, err => {
      toast.msg(err)
    })
  }

  // 初始化加载
  onMounted(() => {})

  // 工具函数
  const formatTime = (time) => {
    if (!time) return ''
    const date = new Date(time)
    return date.toLocaleString('zh-CN', {
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit'
    })
  }

  const getStatusType = (status) => {
    const types = {
      '0': 'danger',
      '2': 'warning',
      '3': 'warning',
      '4': 'success',
      '1': 'primary',
    }
    return types[status] || 'default'
  }

  const getStatusText = (status) => {
    const texts = {
      '0': '未接单',
      '1': '已接单',
      '2': '处理中',
      '3': '等待中',
      '4': '已办结'
    }
    return texts[status] || '未知状态'
  }

  const getCheckResultType = (result) => {
    return result === 'NORMAL' ? 'success' : 'danger'
  }

  const getCheckResultText = (result) => {
    return result === 'NORMAL' ? '正常' : '异常'
  }
</script>

<style scoped>
  .records {
    min-height: 100vh;
    background-color: #f7f8fa;
  }

  .record-list {
    padding: 12px;
  }

  .record-item {
    margin-bottom: 12px;
    border-radius: 8px;
    overflow: hidden;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  }

  .record-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
  }

  .point-name {
    font-size: 16px;
    font-weight: 500;
    color: #323233;
    flex: 1;
    max-height: 100px;
    overflow: hidden;
  }

  .record-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 14px;
    color: #646566;
  }

  .info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .info-row span {
    overflow: hidden;
    max-height: 50px;
  }

  .check-result {
    margin-bottom: 4px;
  }

  :deep(.van-cell) {
    padding: 16px;
    line-height: 1.5;
  }

  :deep(.van-cell) {
    padding: 16px;
    line-height: 1.5;
  }

  :deep(.van-tag) {
    margin-left: 8px;
  }

  .clickBtn :deep(.van-button__content) {
    width: 40px;
  }
</style>